<template>
<view class="cmt-view">
    <scroll-view style="width: 100vw;height: 100vh;" scroll-y="true" lower-threshold="50" @scrolltolower="getMoreCmt">
      <!-- 点赞评论 -->
      <view class="cmt-item" v-for="(item,index) in data.cmtList" :key="index" @click="showNote(item.noteId)">
        <view class="cmt-info">
          <image class="avater" lazy-load="true" :src="data.curUser.avatar"></image>
            <view class="cmt-content">
              <text class="user-name">{{data.curUser.userName}}</text>
              <text class="time">{{item.time}}</text>
              <!-- 评论的内容 -->
              <text class="content-text">{{item.content}}</text>
              
              <view class="cmt-box" v-if="item.preContent != null">
                <view class="cmt-index"></view>
                <text class="cmt-text">{{item.preContent}}</text>
              </view>
              
            </view>
            <image class="note-cover" lazy-load="true" :src="item.cover"></image>
          </view>
          <!-- 点赞和回复 -->
          <view class="cmt-act-box">
            <view class="cmt-act-item" @click.stop="likeCmt(index)">
              <image v-if="item.like > 0" class="cmt-act-img" src="../../static/img/like-btn2.png"></image>
              <image v-else class="cmt-act-img" src="../../static/img/like-btn1.png"></image>
              <text v-if="item.likeNum > 0">{{item.likeNum}}</text>
              <text v-else>点赞</text>
            </view>
            <!-- 删除按钮 -->
            <view class="del-act-box">
                <view class="del-act-item" @click.stop="delCmt(index)">
                  <image class="del-act-img" src="../../static/img/remove.png"></image>
                  <text>删除</text>
                </view>
            </view>
        </view>
      </view>
      <view class="tip-tag" v-if="data.cmtList.length != 0 && data.cmtList.length >= data.total">
        暂无更多了
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { reactive, ref,toRefs,onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app'
import helper from '../../common/helper.js'
 
const data = reactive({
  curUser: uni.getStorageSync("curUser") || null,
  cmtList:[],
  pageNum:0,
  pageSize:10,
  total:0
});

onLoad(()=>{
  getCmt()
})

function getCmt(){
  uni.request({
    url: helper.webUrl + "/comment/getCmt",
    method:'GET',
    header:{
      'Content-Type': 'application/x-www-form-urlencoded',
      'token': helper.getToken()
    },
    data: {
      pageNum: data.pageNum,
      pageSize: data.pageSize
    },
    success: (res) => {
      console.log(res.data);
      if(res.data.code == 200){
        data.total = res.data.data.total
        let list = res.data.data.record
        for(let i = 0; i < list.length; i++){
          list[i].time = helper.getDateTime(list[i].time)
          data.cmtList.push(list[i])
        }
        data.pageNum++
      }
    },
    fail: (err) => {
      console.error('请求失败:', err);
    }
  })
}

function getMoreCmt(){
  console.log("获取更多评论")
  getCmt()
}

async function delCmt(index){
  let replyId = data.cmtList[index].replyId
  if(replyId == null){
    let res = await delCmtReq(data.cmtList[index].cId)
    if(res.data.code == 200){
      data.cmtList.splice(index,1)
    }
  }else{
    let res = await delReplyReq(data.cmtList[index].replyId)
    if(res.data.code == 200){
      data.cmtList.splice(index,1)
    }
  }
}

function delCmtReq(commentId){
  return new Promise((resolve, reject) => {
    uni.request({
      url: helper.webUrl + "/comment/delCmt",
      method:'POST',
      header:{
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      data: {
        commentId: commentId
      },
      success: (res) => {
        console.log(res.data);
        if(res.data.code == 200){
          resolve(res)
        }
      },
      fail: (err) => {
        console.error('请求失败:', err);
      }
    })
  });  
}

function delReplyReq(replyId){
  return new Promise((resolve, reject) => {
    uni.request({
      url: helper.webUrl + "/reply/delReply",
      method:'POST',
      header:{
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      data: {
        replyId: replyId
      },
      success: (res) => {
        console.log(res.data);
        if(res.data.code == 200){
          resolve(res)
        }
      },
      fail: (err) => {
        console.error('请求失败:', err);
      }
    })
  });  
}

async function likeCmt(index){
  //点赞评论或回复
  let replyId = data.cmtList[index].replyId
  if(replyId == null){
    if(data.cmtList[index].like > 0){
      let res = await dislikeCmtReq(data.cmtList[index].cId)
      if(res.data.code == 200){
        data.cmtList[index].like = 0
        data.cmtList[index].likeNum--
      }
    }else{
      let res = await likeCmtReq(data.cmtList[index].cId)
      if(res.data.code == 200){
        data.cmtList[index].like = 1
        data.cmtList[index].likeNum++
      }
    }
  }else{
    if(data.cmtList[index].like > 0){
      let res = await dislikeReplyReq(data.cmtList[index].replyId)
      if(res.data.code == 200){
        data.cmtList[index].like = 0
        data.cmtList[index].likeNum--
      }
    }else{
      let res = await likeReplyReq(data.cmtList[index].replyId)
      if(res.data.code == 200){
        data.cmtList[index].like = 1
        data.cmtList[index].likeNum++
      }
    }
  }
}

function likeCmtReq(commentId){
  return new Promise((resolve, reject) => {
    uni.request({
      url: helper.webUrl + "/comment/likeCmt",
      method:'POST',
      header:{
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      data: {
        userId: helper.getUserId(),
        commentId: commentId
      },
      success: (res) => {
        console.log(res.data);
        if(res.data.code == 200){
          resolve(res)
        }
      },
      fail: (err) => {
        console.error('请求失败:', err);
      }
    })
  });   
}

function dislikeCmtReq(commentId){
  return new Promise((resolve, reject) => {
    uni.request({
      url: helper.webUrl + "/comment/dislikeCmt",
      method:'POST',
      header:{
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      data: {
        userId: helper.getUserId(),
        commentId: commentId
      },
      success: (res) => {
        console.log(res.data);
        if(res.data.code == 200){
          resolve(res)
        }
      },
      fail: (err) => {
        console.error('请求失败:', err);
      }
    })
  });   
}

function likeReplyReq(replyId){
  return new Promise((resolve, reject) => {
    uni.request({
      url: helper.webUrl + "/reply/likeReply",
      method:'POST',
      header:{
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      data: {
        userId: helper.getUserId(),
        replyId: replyId
      },
      success: (res) => {
        console.log(res.data);
        if(res.data.code == 200){
          resolve(res)
        }
      },
      fail: (err) => {
        console.error('请求失败:', err);
      }
    })
  });   
}
function dislikeReplyReq(replyId){
  return new Promise((resolve, reject) => {
    uni.request({
      url: helper.webUrl + "/reply/dislikeReply",
      method:'POST',
      header:{
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      data: {
        userId: helper.getUserId(),
        replyId: replyId
      },
      success: (res) => {
        console.log(res.data);
        if(res.data.code == 200){
          resolve(res)
        }
      },
      fail: (err) => {
        console.error('请求失败:', err);
      }
    })
  });   
}
function showNote(noteId){
  console.log("查看笔记"+noteId)
  let index = ""
  uni.navigateTo({
    url:`/subpages/noteDetail/noteDetail?noteId=${noteId}&index=${index}`
  })
}
</script>

<style>
.cmt-view{
  width: 100vw;
  height: 100vh;
  background-color: #f4f4f4;
}
.cmt-item{
  width: 100vw;
  padding-bottom: 10px;
  background-color: #fff;
  border-bottom: 1px solid #c5c5c5;
}
.cmt-info{
  display: flex;
  width: 100vw;
  min-height: 15vh;
  align-items: center;
  background-color: #fff;
  padding-block: 5px;
}
.avater{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-left: 20px;
}
.cmt-content{
  display: flex;
  flex-direction: column;
  width: 60%;
  margin-left: 10px;
}
.user-name{
  font-size: 16px;
  font-weight: bold;
}
.content-text{
  font-size: 14px;
}
.time{
  color: #949494;
}
.note-cover{
  width: 60px;
  height: 60px;
  border-radius: 20%;
  margin-left: auto;
  margin-right: 20px;
}
.cmt-box{
  display: flex;
  margin-top: 5px;
}
.cmt-index{
  width:5px;
  height: 20px;
  background-color: #949494;
}
.cmt-text{
  margin-left: 10px;
  font-size: 12px;
  color: #949494;
}
.cmt-act-box{
  display: flex;
  margin-left: 15vw;
}
.cmt-act-item{
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f4f4f4;
  border-radius: 50px;
  margin-left: 10px;
}
.cmt-act-img{
  width: 25px;
  height: 25px;
}
.del-act-box{
  display: flex;
  margin-left: auto;
  margin-top: auto;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-top: 5px;
}
.del-act-item{
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f4f4f4;
  border-radius: 50px;
  margin-left: 10px;
}
.del-act-img{
  width: 25px;
  height: 25px;
}
.tip-tag{
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 30px;
  font-size: 16px;
  color: #949494;
}
</style>
